<template>
  <div class="header_main">
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      router
      style="margin-right: 17%"
      active-text-color="#f3be1f"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-submenu index="/productCenter">
        <template slot="title">
          <span @click="changePage('/productCenter')">产品中心</span>
        </template>
        <el-menu-item @click="productIndex(0)" index="/productCenter/quantumRing">量子脚环</el-menu-item>
        <el-menu-item @click="productIndex(1)" index="/productCenter/nfcRing">NFC脚环</el-menu-item>
        <el-menu-item @click="productIndex(2)" index="/productCenter/RFIDRing">RFID脚环</el-menu-item>
        <el-menu-item @click="productIndex(3)" index="/productCenter/holdInstrument">手持仪</el-menu-item>
        <el-menu-item @click="productIndex(4)" index="/productCenter/intelligentHouse">智能鸡舍</el-menu-item>
      </el-submenu>
      <el-submenu index="/resolvent">
        <template slot="title">
          <span @click="changePage('/resolvent')">解决方案</span>
        </template>
        <el-menu-item index="/resolvent/channelControl">渠道管控</el-menu-item>
        <el-menu-item index="/resolvent/mindSource">智慧溯源</el-menu-item>
        <!-- <el-menu-item index="3-3">食品溯源</el-menu-item>
        <el-menu-item index="3-4">商标防伪</el-menu-item> -->
      </el-submenu>
      <el-menu-item index="/industryCase">行业案例</el-menu-item>
      <!-- <el-submenu index="/industryCase">
        <template slot="title">
          <span @click="changePage('/industryCase')">行业案例</span>
        </template>
        <el-menu-item index="/industryCase/birdsSource">禽类溯源</el-menu-item>
        <el-menu-item index="/industryCase/bancassurance"
          >银行保险</el-menu-item
        >
      </el-submenu> -->
      <el-menu-item index="/serviceSup">服务支持</el-menu-item>
      <!-- <el-submenu index="/serviceSup">
        <template slot="title">
          <span @click="changePage('/serviceSup')">服务支持</span>
        </template>
        <el-menu-item index="/serviceSup/agentApplication"
          >代理商申请</el-menu-item
        >
        <el-menu-item index="/serviceSup/productOrder">产品定制</el-menu-item>
        <el-menu-item index="5-3">知识问答</el-menu-item>
        <el-menu-item index="5-4">下载中心</el-menu-item>
      </el-submenu> -->
      <el-submenu index="/about">
        <template slot="title">
          <span @click="changePage('/about')">关于我们</span>
        </template>
        <el-menu-item index="/about/companyProfile">公司简介</el-menu-item>
        <el-menu-item index="/about/coreMembers">核心成员</el-menu-item>
        <!-- <el-menu-item index="6-3">知识产权</el-menu-item>
        <el-menu-item index="6-4">新闻动态</el-menu-item>
        <el-menu-item index="6-5">合作伙伴</el-menu-item>
        <el-menu-item index="6-6">联系我们</el-menu-item> -->
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    // console.log(this.$route.path);
  },
  methods: {
    // handleSelect(e) {
    //   console.log(e);
    // },
    changePage(path) {
      this.$router.push({
        path
      });
    },
    productIndex(index){
      window.sessionStorage.setItem("activeIndex", index);
    }
  }
};
</script>

<style lang="less">
.header_main {
  z-index: 10000000;
  position: sticky;
  position: -webkit-sticky; // 兼容 -webkit 内核的浏览器
  top: 10px;
  height: 72px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 auto;
  .logo {
    width: 136px;
    height: 100%;
    margin-left: 20%;
    display: flex;
    align-items: center;
    img {
      width: 100%;
      line-height: 72px;
    }
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 2px solid #f3be1f !important;
    height: 72px;
    line-height: 72px;
    font-size: 18px;
    padding: 0px 35px;
  }
  .el-menu--horizontal > .el-menu-item,
  .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 72px;
    line-height: 72px;
    font-size: 18px;
    padding: 0px 35px;
  }
  .el-menu-item:hover,
  .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
    border-bottom: 2px solid #f3be1f !important;
    color: #f3be1f !important;
  }
  .el-submenu__title i {
    display: none;
  }
}
.el-main {
  padding: 0 !important;
}
</style>